<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">发证方列表</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="展示注册中心下的发证方列表" />
    </div>
    <div class="ci_des">
      <div style="display: flex"></div>
      <div style="display: flex">
        <el-input
          style="margin-right: 10px"
          class="ci_input"
          v-model="name"
          clearable
          placeholder="请输入名称查询"
        ></el-input>
        <el-select
          v-model="searchStatus"
          clearable
          placeholder="请选择状态"
          style="margin-right: 10px"
        >
          <el-option label="待审核" value="0" />
          <el-option label="正常" value="1" />
          <el-option label="停用" value="2" />
        </el-select>

        <!-- <el-input
            style="margin-right: 10px"
            class="ci_input"
            clearable
            v-model="email"
            placeholder="请输入邮箱查询"
          ></el-input> -->
        <div @click="search">
          <!-- <Search class="iconfont__header_icon" /> -->
          <el-button plain>查询 </el-button>
        </div>
        <!-- <div class="iconfont icon-zhongzhireset" @click="fresh">
            <RefreshRight class="iconfont__header_icon" />
          </div> -->
      </div>
    </div>
    <div class="ci_content">
      <div class="table_list">
        <div class="tl_table">
          <el-table
            v-loading="pictLoading"
            :data="tableData"
            height="100%"
            width="100%"
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column prop="id" label="编号" width="150">
              <template v-slot="scope">
                <el-tooltip
                  effect="light"
                  :content="scope.row.id"
                  placement="top"
                >
                <div class="center_start">
                  <span
                   class="ellipsis"
                    @click="lssuerInfo(scope)"
                    style="font-size: 12px; cursor: pointer; color: #409eff"
                  >
                    {{ scope.row.id }}
                  </span>
                </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="status" label="状态" width="180">
              <template v-slot="scope">
                {{
                  scope.row.status === "0"
                    ? "待审核"
                    : scope.row.status === "1"
                    ? "正常"
                    : scope.row.status === "2"
                    ? "停用"
                    : "--"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间"  />
            <el-table-column prop="updatedTime" label="更新时间" />
            <el-table-column prop="" label="操作">
              <template v-slot="scope">
                <div class="center_start">
                  <span
                    @click="deleteLssuer(scope)"
                    style="font-size: 12px; cursor: pointer; color: #409eff"
                  >
                    删除
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tl_table_pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :hide-on-single-page="page.isPageHide"
            @current-change="handleCurrentChange"
            :current-page.sync="page.pageNo"
            :page-size="page.pageSize"
            :page-sizes="[10, 15, 20, 30]"
            layout="total, prev, pager, next, sizes"
            :total="page.totalCount"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog v-model="dialogVisible" title="删除发证方" width="25%">
        <div style="color:red;">确定要删除发证方吗？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button  @click="dialogVisible = false">
              取消
            </el-button>
            <el-button type="primary" @click="deleteConfirm()" :loading="deleteLoading">确定</el-button>

          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script setup>
import { DescriptionBlock } from "@/components/index";
import { tableHeaderStyle, tableCellStyle } from "@/utils/tableStyle";
import { lssuerListApi,lssuerDeleteApi } from "@/api/RegisterCenter";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const pictLoading = ref(false);
const searchStatus = ref("");
const dialogVisible = ref(false);
const deleteLoading = ref(false);
const deleteId = ref("");
const name = ref("");
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  isPageHide: false,
  totalPage: 0,
  totalCount: 0,
});
const dialogWidth = ref("600px");
const tableData = ref([
]);
const search = () => {
  getLssuerList();
};
const lssuerInfo = (scope) => {
  let id = scope.row.id;
  router.push({ path: "/RegisterCenter/AdminLssuerInfo", query: { id } });
};
const deleteLssuer = (scope) =>{
  deleteId.value  = scope.row.id
  dialogVisible.value = true;
}
const deleteConfirm = () =>{
  let parmars = {
    id:deleteId.value
  }
  deleteLoading.value = true;
  lssuerDeleteApi(parmars).then((res) => {
      if (res.success) {
        ElMessage.success(res.msg || "删除发证方成功！");
        deleteLoading.value = false;
        dialogVisible.value =false;
        getLssuerList();
      } else {
        ElMessage.error(res.msg || "删除发证方失败！");
        deleteLoading.value = false;
        dialogVisible.value =false;
      }
    }).catch((err) => {
      ElMessage.error(err.msg);
      deleteLoading.value = false;
      dialogVisible.value =false;
    });
}
const handleSizeChange = (val) => {
  page.pageNo = 1;
  page.pageSize = val;
  getLssuerList();
};
const handleCurrentChange = (val) => {
  page.pageNo = val;
  getLssuerList();
};
const setDialogWidth = () => {
  let val = document.body.clientWidth * 0.6;
  const def = 600; // 默认宽度
  if (val < def) {
    dialogWidth.value = "60%";
  } else {
    dialogWidth.value = def + "px";
  }
};
const getLssuerList = () => {
  let parmars = {
    pageNum: page.pageNo,
    pageSize: page.pageSize,
    name: name.value,
    status: searchStatus.value,
  };
  pictLoading.value = true;
  lssuerListApi(parmars)
    .then((res) => {
      if (res.success && res.data) {
        pictLoading.value = false;
        tableData.value = res.data.list || [];
        page.totalCount = res.data.totalCount;
      } else {
        pictLoading.value = false;
      }
    })
    .catch((err) => {
      ElMessage.error(err.msg);
      pictLoading.value = false;
    });
};
onMounted(() => {
  setDialogWidth();
  getLssuerList();
});
</script>
  <style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
  .tl_table_pagination {
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 16px;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>